<template>
  <div class="colc">
    <el-link type="primary" @click="getBack" style="margin-left:20px;">返回首页</el-link>
    <el-link type="primary" @click="comName=true" class="pro">收藏的产品</el-link>
    <el-link type="primary" style="margin-left:20px" @click="comName=false" class="sho">收藏的店铺</el-link>
    <transition mode="out-in">
       <collect-pro v-if="comName" class="produ"></collect-pro>
       <collect-shopper v-else class="super"></collect-shopper>
    </transition>
  </div>
</template>
<script>
import CollectPro from './collectPro.vue'
import CollectShopper from './collectShopper.vue'
export default {
    data(){
        return{
            comName:true
        }
    },
    methods:{
        getBack(){
            this.$router.push('/');
        }
    },
    components:{
        collectPro:CollectPro,
        collectShopper:CollectShopper
    }
}
</script>
<style>
     .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }
        .colc{
            background-color: white;
        }
        .pro,.sho{
            margin-top: 20px;
            margin-left: 600px;
        }
        el-link{
            font-size: 50px;
        }
        .produ,.super{
            margin-left: 300px;
        }
</style>